<template>
  <div>
    <jxf-titletip title="信用管理详情页" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('update:isShow', false)"></jxf-titletip>
    <el-card class="jxf-table-card mt20">
      <el-row type="flex" align="middle">
        <el-row :span="6" class="pd20">
          <div class="imgBlcok bg-gray">
            <img :src="enterpriseLogo" alt="">
          </div>
        </el-row>
        <el-row :span="18">
          <jxf-datalist :info="info"></jxf-datalist>
        </el-row>
      </el-row>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <p>设置评分星级 <span class="c-gray">(星级可编辑，编辑后以最后变更为主)</span></p>
      </div>
      <el-form class="mt20" :model="starInfo" ref="starInfo" :rules="rules" label-width="100px">
        <el-form-item label="设置星级:" prop="star">
          <el-rate class="mt10" v-model="starInfo.star" text-color="#ff9900" score-template="{value}"></el-rate>
          <span class="c-gray">点击星级，进行设置</span>
        </el-form-item>
        <el-form-item label="设置分数:" prop="score">
          <el-input v-model="starInfo.score" style="max-width: 200px;"></el-input><br>
          <span class="c-gray">分数与星级不进行对应</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('starInfo')">保存并更新</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        enterpriseLogo:"",
        info:[],
        starInfo:{
          facUserId:null,
          score:0,
          star:0
        },
        userType:null,
        rules: {
          score: [{required: true, message: '请设置分数', trigger: 'blur'},
            {validator: validate.max100, trigger: 'change'}],
        }
      }
    },
    methods: {
      getDetail(info) {
        this.userType = info.userType
        // userType 自定义 1 为采购商 2 为供应商
        let url = info.userType === 1 ? apis.factory.merchantDetail : apis.factory.supplyDetail
        ajax.get(url, {facUserId:info.facUserId})
          .then(res => {
            if (res.success === true) {
              if (res.data !== null) {
                this.starInfo = {
                  facUserId:res.data.facUserId,
                  score:res.data.score,
                  star:res.data.star
                }
                this.enterpriseLogo = res.data.logo
                this.info = this.formatData(res.data)
              } else {
                this.info = {}
              }
            }
          })
      },
      // 数据处理
      formatData(item) {
        return [{
          label: "企业名称",
          value: item.enterpriseName
        }, {
          label: "企业账号",
          value: item.telphone
        }, {
          label: "企业地址",
          value: item.address
        }, {
          label: "所属角色",
          value: this.userType === 1 ? '采购商' : "供应商"
        }, {
          label: "所属分公司",
          value: item.agentName
        }, {
          label: "对接业务员",
          value: item.salesManName
        }]
      },

      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateFacUser()
          }
          else {
            return false;
          }
        });
      },
      updateFacUser() {
        ajax.post(apis.factory.updateFacUser, this.starInfo)
          .then(res => {
            if (res.success === true) {
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.$emit('update:isShow', false)
              this.$emit("refreshPage",this.userType)
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  .imgBlcok{
    width: 200px;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      max-width: 200px;
      max-height: 200px;
    }
  }
  .mt10{
    margin-top: 10px;
  }
</style>
